<template>
  <div class="content">
    <pageHeaderNew title="知识库"></pageHeaderNew>

    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            v-model="searchName"
            @search="tableRef.value.loadData()"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>
      <a-space>
        <a-button type="primary" @click="addKnowledgeBase">
          新增知识库
          <template #icon>
            <icon-plus />
          </template>
        </a-button>
      </a-space>
    </div>
    <TableTurn
      @row-click="openBase"
      :tableData="getTableData"
      ref="tableRef"
      :args="args"
    >
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="storeName" title="知识库名称">
      </a-table-column>

      <a-table-column :width="200" data-index="remark" title="简介">
      </a-table-column>

      <a-table-column :width="200" data-index="" title="操作">
        <template #cell="{ record }">
          <!-- <a-button type="text" @click="setPreview(record)">预览</a-button> -->
          <a-space :size="20">
            <a-tooltip content="分享">
              <icon-font
                type="icon-fenxiangfangshi"
                :size="19"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goShare"
              />
            </a-tooltip>
            <a-tooltip :content="record.topState === 1 ? '取消置顶' : '置顶'">
              <icon-font
                @click="setTopping(record)"
                type="icon-chuangti-zhiding"
                :size="20"
                :style="{
                  cursor: 'pointer',
                  color: record.topState === 1 ? 'f9ca1f' : ''
                }"
              />
            </a-tooltip>
            <a-tooltip content="更多操作">
              <a-dropdown>
                <icon-font
                  type="icon-more-def"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
                <template #content>
                  <a-doption @click="openTabs(record)">新标签页打开</a-doption>
                  <a-doption @click="copy(record)">复制链接</a-doption>
                  <!-- <a-doption @click="goRename(record)">重命名</a-doption> -->
                  <a-doption @click="setTopping(record)">{{
                    record.topState === 1 ? '取消置顶' : '置顶'
                  }}</a-doption>
                  <a-doption @ok="delFile(record)">取消收藏</a-doption>
                  <a-doption>编辑</a-doption>
                </template>
              </a-dropdown>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </div>

  <AddKnowledgeBase
    v-model:visible="addBaseModel"
    @addKnowledgeBase="postKnowledgeBase"
  ></AddKnowledgeBase>
</template>

<script lang="ts" setup>
import {
  postknowledgeBase,
  getknowledgeBase,
  putFileName,
  putFileTopping
} from '@/apis/document/documentCenter/index';
import { Message } from '@arco-design/web-vue';
import AddKnowledgeBase from './AddKnowledgeBase.vue';
import KnowledgeBasePage from './KnowledgeBasePage/index.vue';
import useClipboard from 'vue-clipboard3';

const router = useRouter();
const KnowledgeBaseName = ref();
const searchName = ref();
const getTableData = async (page: any) => {
  try {
    const msg: any = {};
    if (searchName.value) msg.name = searchName.value;
    const res = await getknowledgeBase({ ...msg });
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};
const addBaseModel = ref(false);
const addKnowledgeBase = () => {
  addBaseModel.value = true;
};
const tableRef = ref();
const postKnowledgeBase = async (form: any) => {
  try {
    await postknowledgeBase({ ...form });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const { toClipboard } = useClipboard();
const copy = async (res) => {
  try {
    await toClipboard(res.downloadPath);
    Message.success('复制成功');
  } catch (err: unknown) {
    console.log(err);
  }
};
const setFileName = ref();
const isShow = ref(false);
const fileType = ref();
const setFileData = ref();
const isError = ref(false);
const goRename = async (res: any) => {
  setFileName.value = res.useFileName.split('.')[0];
  fileType.value = res.useFileName.split('.')[1];
  setFileData.value = res;
  isShow.value = true;
  console.log(setFileData.value, fileType.value, setFileName.value);
};

const changeFileName = async (e: string) => {
  try {
    if (setFileName.value === '') {
      isError.value = true;
      return;
    }
    await putFileName({
      useFileName: `${setFileName.value}.${fileType.value}`,
      id: setFileData.value.id
    });
    tableRef.value.loadData();
    setFileName.value = undefined;
    fileType.value = undefined;
    setFileData.value = undefined;
    isShow.value = false;
    isError.value = false;
  } catch (err: unknown) {
    console.log(err);
  }
};

const openTabs = (res: any) => {
  router.push({ name: 'FileTabsPage', query: { url: res.downloadPath } });
};

// const setTopping = async (res: any) => {
//   try {
//     await putFileTopping({ id: res.id });
//     tableRef.value.loadData();
//   } catch (err: unknown) {
//     console.log(err);
//   }
// };

const openBase = (record: any) => {
  router.push({
    name: 'KnowledgeBasePage',
    query: { storeName: record.storeName, id: record.id }
  });
};
</script>

<style scoped lang="less">
.content {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
